.io-type-container {


  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;

  .io-type-input-container {

    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;

    .upload-area {
      //width: 300px;
      //height: 200px;

      &.hasImage {
        border: 0px dashed #ccc;
      }

      border: 2px dashed #ccc;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      min-height: 60px;
      transition: border 0.3s;


    }

    .upload-area.dragover {
      border-color: #0066ff;
    }


  }

  .io-type-output-container {
    display: none;

    &.show {
      display: block;
    }
  }

  .image-container {

    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;

    position: relative;

    &:before {
      visibility: hidden;
      background-color: var(--semi-color-overlay-bg);
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;

    }

    &:hover {
      &:before {
        visibility: visible;
      }

      .icon-view {
        visibility: visible;
      }

      .icon-delete {
        visibility: visible;
      }
    }

    &>img {
      max-width: 100%;
      max-height: 100%;

    }

    .icon-view {
      visibility: hidden;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      z-index: 10;

      &:hover {
        color: white;
      }
    }

    .icon-delete {
      visibility: hidden;
      position: absolute;
      top: 10px;
      right: 10%;

      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      z-index: 10;

      &:hover {
        color: white;
      }
    }

  }
}

